import React from "react";
import {Card, Col, Form, message, Row, Spin} from "antd";
import {connect} from "dva";

const FormItem = Form.Item;

@connect(({accountModel}) => ({
    accountModel,
}))
class AccountCenter extends React.Component {
    state = {
        loading: false,
        accountInfo: {}
    }

    componentDidMount() {
        const {state} = this.props.location;
        if (state) {
            const {id} = state;
            console.log('传递过来的数据是:' + id);
            this.requestData(id);
        }
    }

    requestData = (id) => {
        const thisCtx = this;
        const {dispatch} = this.props;
        this.setState({loading: true});
        dispatch({
            type: 'accountModel/userInfo',
            payload: {id},
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    thisCtx.setState({
                        accountInfo: data.datas
                    });
                } else {
                    message.error('账户信息查询失败')
                }
            }
        });
    }

    render() {

        const {accountInfo, loading} = this.state;

        const colLayout = {
            xs: 24,
            sm: 24,
            md: 24,
            lg: 24
        }

        const formLayout = {
            layout: 'horizontal',
            labelCol: {
                xs: 24,
                sm: 10
            },
            wrapperCol: {
                xs: 24,
                sm: 14
            }
        }

        return (
            <div>
                <Spin spinning={loading}>
                    <Card title={'用户中心'}>
                        <Form {...formLayout}>
                            <Row>
                                <Col {...colLayout}>
                                    <FormItem label={'账户名'} key={'companyName'}>
                                        {
                                            accountInfo.companyName
                                        }
                                    </FormItem>
                                    <FormItem label={'营业执照'} key={'businessPath'}>
                                        {
                                            <div style={{width: 150, height: 140}}>
                                                <img alt={'businessPath'} style={{width: '100%', height: 140}}
                                                     src={accountInfo.businessPath}
                                                     onClick={() => {
                                                         window.open(accountInfo.businessPath, '_blank')
                                                     }}
                                                />
                                            </div>
                                        }
                                    </FormItem>
                                    <FormItem label={'统一社会信用代码'} key={'offnum'}>
                                        {
                                            accountInfo.offnum
                                        }
                                    </FormItem>
                                    <FormItem label={'联系人'} key={'contactor'}>
                                        {
                                            accountInfo.contactor
                                        }
                                    </FormItem>
                                    <FormItem label={'手机号'} key={'phone'}>
                                        {
                                            accountInfo.phone
                                        }
                                    </FormItem>
                                    <FormItem label={'联系邮箱'} key={'email'}>
                                        {
                                            accountInfo.email
                                        }
                                    </FormItem>
                                    <FormItem label={'公司logo'} key={'logo'}>
                                        {
                                            <div style={{width: 150, height: 140}}>
                                                <img alt={'logo'} style={{width: '100%', height: 140}}
                                                     src={accountInfo.logo}
                                                     onClick={() => {
                                                         window.open(accountInfo.logo, '_blank')
                                                     }}
                                                />
                                            </div>
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                </Spin>
            </div>
        );
    }
}

export default Form.create()(AccountCenter);
